﻿<template>
  <div class="body">
    <div class="Context1">
      <div class="Context1-item" v-for="item in navItems" :key="item.text1">
        <div class="text1">{{ item.text1 }}</div>
        <div class="text2">{{ item.text2 }}</div>
        <div class="text3">{{ item.text3 }}</div>
      </div>
    </div>
    <slot></slot>
    <!-- <div class="img1">
      <img src="../assets/China_1.png" alt="" />
    </div> -->
  </div>
</template>




<script>
export default {
  data: function () {
    return {
      navItems: [
        {
          text1: "总会话量",
          text2: "230",
          text3: "有效会话数200",
        },
        {
          text1: "总客户数",
          text2: "30",
          text3: "有效客户20",
        },
        {
          text1: "总访问量",
          text2: "208",
          text3: "访客对话率50%",
        },
        {
          text1: "平均会话时长",
          text2: "9m3s",
          text3: "平均响应时间30s",
        },
        {
          text1: "好评率",
          text2: "78%",
          text3: "评价率67%",
        },
        {
          text1: "一次性解决问题",
          text2: "60%",
          text3: "解决率65%",
        },
        {
          text1: "总会话消息数",
          text2: "2900",
          text3: "有效消息数200",
        },
        {
          text1: "总人工消息数",
          text2: "2600",
          text3: "总客服消息数2389",
        },
        {
          text1: "平均每会话消息数",
          text2: "28",
          text3: "有效消息数15",
        },
      ],
    };
  },
};
</script>

<style>
.body {
  height: 2169px;
  width: 1040px;
  border: 2px solid purple;
  padding-left: 40px;
}

.Context1-item {
  width: 161px;
  height: 178px;
  background-color: rgba(0, 110, 255, 0.098);
  display: inline-block;
  margin: 15px;
}
.text1 {
  width: 149px;
  height: 50px;
  text-align: center;
  color: #333333e5;
  line-height: 50px;
}

.text2 {
  width: 149px;
  height: 50px;
  color: #006effe5;
  font-weight: 650;
  font-size: 36px;
  text-align: center;
  line-height: 50px;
}

.text3 {
  width: 149px;
  height: 50px;
  text-align: center;
  color: #999999;
  line-height: 50px;
}

.img1{
  width: 900px;
  height: 300px;
}
</style>